<template>
  <!-- checkStrictly: 是否严格遵守父子节点互不关联, 开启后父是父, 子是子, 各论各的, 每个节点都能独立被选中, 即可实现树枝节点的数据回显 -->
  <!-- :props="{ label: 'name', value: 'id', checkStrictly: true }" -->
  <el-cascader :value="value" :options="deps" size="mini" :props="{ label: 'name', value: 'id', checkStrictly: true }" separator="-" @change="hChange" />
</template>

<script>

import { getDepartMentList } from '@/api/departments'
import { transListToTreeData } from '@/utils'
export default {
  name: 'SelectTree',
  props: {
    value: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      deps: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      // this.depts = transListToTree(await getDepartments())
      // 获取组织架构，把组织架构转为树形结构
      const { data } = await getDepartMentList()
      data.shift()
      // console.log(data)
      this.deps = transListToTreeData(data)
      // console.log(this.deps)
    },
    hChange(val) {
      // console.log(val)

      // 俩方法都是用来获取最后一个元素的
      // console.log(val[val.length - 1])
      // console.log([...val].pop())
      this.$emit('input', [...val].pop())
    }
  }
}
</script>
